import {
  request
} from "../../request/index.js";
// ====asyc语法的引入语句，注意：此语句必须单个引入，不能全局引入
import regeneratorRuntime from '../../lib/runtime/runtime';

Page({
  //=数据存储 
  data: {
    // ===左侧大菜单数据
    leftMenuList:[],
    // ===右侧的商品数据
    rightContent:[],
    currentIndex:0,
    scrollTop:0
  },
  // =接口的返回数据
  Cates:[],

  // =onload程序执行时运行
  onLoad: function (options) {
    // ==引入缓存技术，实现数据本地存储，有条件更新
    //===获取本地数据("cates"指的是获取本地数据时，数据的名字，后面存储的时候也用这个名字，根据名字存储和获取数据)
    const Cates = wx.getStorageSync("cates"); 
    // ===数据判断，有数据就用，没数据再发送请求获取数据
    if(!Cates){
      this.getCates();
    }else{
      // ==== 过期时，仍然获取新数据
      if(Date.now()-Cates.time>1000*60*5){
        this.getCates();
      }else{
        // ====数据未过期，使用旧数据(将从本地读取的数据，赋值给全局变量，之后正常使用)
        this.Cates=Cates.data;
        let leftMenuList=this.Cates.map(v=>v.cat_name);
        let rightContent=this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }

  },

  // =获取滚动列表数据的函数
  async getCates(){
    // ====下行语句，替代了promise中的then语句，好处是，看起来像同步。
    // ====注意：await未执行的时候，下方的代码不会执行
    const res=await request({url: '/categories'});
    // ====下方代码段，数据处理与es6中相同
    this.Cates=res;
    wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
    let leftMenuList=this.Cates.map(v=>v.cat_name);
    let rightContent=this.Cates[0].children;
    this.setData({
      leftMenuList,
      rightContent
    })
  },


  // ==下方的代码为es6使用的promise技术，暂时不用，而是使用es7中的async技术
  // getCates() {
  //   //=== 下面对引入的requet进行使用,发送请求获取数据
  //   request({url: '/categories'})
  //     .then(res => {
  //       // ====，赋值给全局变量
  //       this.Cates=res.data.message;
  //       // ====缓存技术关联：将数据存储到本地
  //       wx.setStorageSync("cates", {time:Date.now(),data:this.Cates});
  //       // ====构造左侧的大菜单数据; 知识点 1、let构造的变量为局部变量，跟{}外同名也不是一个变量；
  //       // ====map函数，对数组中的每个值执行一次后面的函数，详情见firfox收藏
  //       let leftMenuList=this.Cates.map(v=>v.cat_name);
  //       // ====构造右侧的商品数据,知识第一个分类即大家电下商品的数据
  //       let rightContent=this.Cates[0].children;
  //       // ====将数据真正的赋值给外层的leftMenuList;
  //       // ====这里setData中的写法，等同于：leftMenulist:leftMenuList,两个值所属区域不一样
  //       this.setData({
  //         leftMenuList,
  //         rightContent
  //       })

  //     })
  // },

  //=左侧菜单的点击事件处理
  
  handleItemTap(e){
    // ====获取index，赋值给currentIndex,动态改变currentIndex
    const{index}=e.currentTarget.dataset;
    let rightContent=this.Cates[index].children;
    this.setData({
      currentIndex:index,
      rightContent,
      scrollTop:0
    })
  }
})